<template>
  <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
    <van-list v-model:loading="pageLoading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
      @load="pageLoad">
      <div class="app-container">
        <div class="anchor-head">
          <div class="anchor-head-left">
            <van-image round width="3em" height="3em" :src="anchorInfo.url" fit="cover" />
          </div>
          <div class="anchor-head-right">
            <h4>ID:{{ anchorInfo.id }}</h4>
            <p>{{ anchorInfo.name }}</p>
          </div>
        </div>
        <div class="anchor-main">
          <div class="anchor-main-list">
            <div class="list-img-box">
              <div class="list-img-item" v-for="item in goodsList" :key="item.h5Id">
                <div class="timer-box">
                  <h4>{{ `${item.day}` }}</h4>
                  <span>{{ item.year }}</span>
                </div>
                <AnchorItem :dateItemDetail="item" @MorePhoto="MorePhoto" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>

import { computed, reactive, toRefs, ref, onMounted } from "vue"

import { useRoute } from "vue-router"
import {
  GetClientAnchorInfo,
} from "@/api/mine/index.js"

import AnchorItem from "@/components/anchorItem/index.vue"
import userOrderStore from "@/store/index.js"
let userInfo = userOrderStore()

const route = useRoute()

const state = reactive({
  goodsList: [],
  paramsData: {
    pageSize: 20,
    pageNum: 1,
  }
})

const { goodsList } = toRefs(state)
let anchorInfo = ref({})
let loadingRefresh = ref(false)
const getClientAnchorInfoFn = async () => {
  let { pageSize, pageNum } = state.paramsData
  let params = {
    id: route.query.id,
    pageSize,
    pageNum,
  }
  let data = await GetClientAnchorInfo(params)
  loadingRefresh.value = false
  userInfo.setIsPageLoading(false)
  data.rows.forEach(o => {
    let timer = o.newestTime.split(" ")
    o.details.forEach(o3 => {
      if (o3.photoUrl.indexOf('.MP4') != -1) {
        o3.photoUrl = o3.photoUrl.replace('.MP4', '.mp4')
      }
    })
    o.year = timer[0].split('-')[0]
    o.day = timer[0].split('-')[1] + '-' + timer[0].split('-')[2]
    o.imgList = o.details.length > 6 ? o.details.map(o1 => o1.photoUrl).slice(0, 8) : o.details.map(o1 => o1.photoUrl)
  })
  state.goodsList = state.goodsList.concat(data.rows)
  if (state.goodsList.length == data.total) {
    finished.value = true
  }
  pageLoading.value = false
  // console.log(connectedArray); // 输出: [1, 2, 3, 4, 5, 6]
}

const MorePhoto = (id) => {
  let i = state.goodsList.findIndex(o => o.id == id)
  state.goodsList[i].imgList = state.goodsList[i].details.map(o1 => o1.photoUrl)
}

const onRefresh = () => {
  state.paramsData.pageNum = 1
  state.goodsList = []
  getClientAnchorInfoFn()
  loadingRefresh.value = true
}

let pageLoading = ref(false)
let finished = ref(false)
const pageLoad = () => {
  state.paramsData.pageNum++
  // userInfo.setIsPageLoading(true)
  getClientAnchorInfoFn()
}

onMounted(() => {
  userInfo.setIsPageLoading(true)
  anchorInfo.value = route.query
  getClientAnchorInfoFn()
})

</script>

<style lang="scss" scoped>
.anchor-head {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;

  .anchor-head-left {
    width: 3em;
    height: 3em;
    flex: none;
  }

  .anchor-head-right {
    margin-left: 10px;
    line-height: 1;

    h4 {
      font-weight: normal;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    p {
      font-size: 12px;
      color: #333;
    }
  }
}

.app-container {
  background: #f2f2f2;
  padding-top: 10px;
  // min-height: calc(100vh - 46px);
}

.anchor-main-list {
  background: #f2f2f2;
  padding: 0;

  .list-img-item {
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    background-color: #fff;
  }
}

:deep(.van-grid-item__content) {
  padding: 0;
}

.timer-box {
  flex: none;
  margin-right: 10px;

  span {
    font-size: .8em;
    color: #999;
  }

  h4 {
    font-size: 1.2em;
    line-height: 1;
    margin-bottom: 5px;
    color: #333;
  }
}

.van-image {
  border-radius: 8px;
  overflow: hidden;
}

.van-grid {
  width: 100%;
}
</style>
